export default defineComponent({
	props: {
		modelValue: [Array, String] //Object as PropType<String[]>
	},
	emits: ["update:modelValue"],
	setup(props, { emit }) {
		const data = ref<String[]>([]);
		const inputEl = ref<any>();
		const state = reactive({
			inputVal: "",
			showInput: false
		});
		watch(
			() => props.modelValue,
			() => {
				if (!props.modelValue) {
					data.value = [];
				} else if (typeof props.modelValue == "string") {
					data.value = props.modelValue.split(";");
				} else {
					data.value = props.modelValue as String[];
				}
			}
		);
		const addTag = (e: any) => {
			if (e.keyCode == 13) {
				if (!data.value?.includes(state.inputVal)) {
					data.value.push(state.inputVal);
					emit("update:modelValue", data.value);
					state.inputVal = "";
					state.showInput = false;
				}
			}
		};
		return () => {
			return (
				<div style="display:flow-root">
					{data.value.map((v, i: number) => {
						return (
							<el-tag class="mr-1" closable disable-transitions={false} onClose={() => data.value.splice(i, 1)}>
								{v}
							</el-tag>
						);
					})}

					{state.showInput ? (
						<el-tooltip show-after={500} content="输入后回车完成添加">
							<el-input
								ref={inputEl}
								v-model={state.inputVal}
								style="width: 150px;margin-right:4px"
								size="default"
								onKeyup={addTag}
								onBlur={() => (state.showInput = false)}
								placeholder="输入后回车完成添加"
							/>
						</el-tooltip>
					) : (
						<el-button
							class="iconfont iconplus1 ml-1"
							size="default"
							onClick={() => {
								state.showInput = true;
								nextTick(() => {
									inputEl.value.focus();
								});
							}}
						>
							添加
						</el-button>
					)}
				</div>
			);
		};
	}
});
